<template>
  <div class="bankCard">
    <div class="bankCardList" v-if="!isBindBankCard">
      <ul>
        <li>
          <article class="bankCardArticle displayFlex">
            <section>银行类型</section>
            <section>
              <Select v-model="model1" style="width:300px">
                <Option v-for="item in cityList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </section>
          </article>
        </li>
        <li>
          <article class="bankCardArticle displayFlex">
            <section>银行账户</section>
            <section>
              <input type="text" v-model="cardValue" placeholder="请输入银行卡号" class="inputWith" :maxlength="20">
            </section>
          </article>
        </li>
        <li>
          <article class="bankCardArticle displayFlex">
            <section>银行户名</section>
            <section>
              <Input v-model="nameValue" placeholder="" style="width: 300px"></Input>
            </section>
          </article>
        </li>
      </ul>
      <div class="cardSubmit">
        <p><a href="javascript:void(0)" @click="reset">重置</a></p>
        <p><a href="javascript:void(0)" @click="setUpBank">设置银行</a></p>
      </div>
    </div>
    <!--绑定银行成功显示-->
    <div class="bindCardSuccess" v-if="isBindBankCard">
      <div class="boundBank">
        <div class="boundBankTile">
          <p class="title"><img :src="cardImg" alt="">{{bankCardInfo.bankName}}储蓄卡</p>
          <p class="bName">手机尾号{{bankCardInfo.phone}}</p>
        </div>
        <div class="boundBankNum">
          <p><span class="circular"></span><span class="circular"></span><span class="circular"></span><span
              class="circular"></span></p>
          <p><span class="circular"></span><span class="circular"></span><span class="circular"></span><span
              class="circular"></span></p>
          <p><span class="circular"></span><span class="circular"></span><span class="circular"></span><span
              class="circular"></span></p>
          <p>{{bankCardInfo.cardNumber}}</p>
        </div>
      </div>
      <div class="promptMessage">
        <p>为了你的账户安全，本平台只能绑定一张银行卡。</p>
        <p>如需更换绑定银行卡，请<a :href="_Api.customerLink" target="_blank">联系客服</a></p>
      </div>
    </div>
  </div>
</template>

<script>
  import './bankCard.scss';
  import {mapState} from 'vuex';
  export default {
    data() {
      return {
        cityList: [],//所有银行列表
        cardImg: require('../../../assets/images/personal/bankCard/bank.png'),
        model1: '',//银行卡id
        cardValue: '',//银行账户(卡号)
        nameValue: '',//银行户名
        isBindBankCard: false,//是否绑定银行卡
        bankCardInfo: [],//银行卡信息
        isBusy: false,//银行卡绑定锁
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.mutations.userInformation, //用户信息
      }),
    },
    activated() {
//      this.init();
    },
    mounted(){
      this.init();
    },
    methods: {
      init() {
        this.initData();
        if (this.isBindBankCard) {
          //获取银行卡信息
          this.getBankCardInfo();
        }else{
          //获取所有银行列表
          this.getAllbankList();
        }
      },
      //初始化页面数据`
      initData() {
        this.cardValue = '';
        this.nameValue = '';
        this.model1 = '';
        if (this.userInfo.memberInfo) {
          this.isBindBankCard = this.userInfo.memberInfo.isBindBankCard ? this.userInfo.memberInfo.isBindBankCard : false;
        }
      },
      //获取所有银行列表
      getAllbankList() {
        let that = this;
        that._Util.post(that, that._Api.POST_ALL_BANK_LIST, {}, (data) => {
          that.cityList = data || [];
        });
      },
      //获取银行卡信息
      getBankCardInfo() {
        let that = this;
        that._Util.post(that, that._Api.POST_GET_BANK_CARD_DATA, {}, (data) => {
          that.bankCardInfo = data || {};
        });
      },
      //重置
      reset() {
        this.initData();
      },
      //设置银行卡
      setUpBank() {
        let that = this;
        if (!that.model1) {
          that._Util.showAlert('请选择银行类型');
          return;
        }
        if (!that.cardValue) {
          that._Util.showAlert('银行账户输入不能为空');
          return;
        }
        if (that.cardValue.length < 18 || /[^0-9]/g.test(that.cardValue)) {
          that._Util.showAlert('银行账户格式不正确');
          return;
        }
        if (!that.nameValue) {
          that._Util.showAlert('银行户名输入不能为空');
          return;
        }
        if (that.isBusy) return;
        that.isBusy = true;
        let params = {
          bankId: that.model1,
          cardNumber: that.cardValue,
          realName: that.nameValue,
        };
        that._Util.post(that, that._Api.POST_BIND_BANK_CARD, params, (data, dataAll) => {
          that.isBusy = false;
          if (dataAll.code == '0') {
            that._Util.showAlert(dataAll.msg);
            that.$parent.$parent.$refs.personalHeader.theUserInForm();
            that.isBindBankCard = true;
          }
        }, (data) => {
          that._Util.showAlert(data.msg);
          that.isBusy = false;
        },'post');
      }
    },
    watch: {
      'userInfo'() {
        if (this.userInfo.memberInfo) {
          this.isBindBankCard = this.userInfo.memberInfo.isBindBankCard ? this.userInfo.memberInfo.isBindBankCard : false;
        }
        this.init();
      },
      'cardValue'(val) {
        this.cardValue = val.replace(/[^0-9]/g, '');
      },
      '$route.query.id'(val) {
        if (val == 3) {
          if (this.userInfo.memberInfo) {
            this.isBindBankCard = this.userInfo.memberInfo.isBindBankCard ? this.userInfo.memberInfo.isBindBankCard : false;
          }
          this.init();
        }
      }
    }
  }
</script>
